<template>
	<view v-if="goods_info.goods_name">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" circular="true">
			<swiper-item v-for="(item,i) in goods_info.pic" :key="i">
				<image :src="item.pic" @click="preview(i)"></image>
			</swiper-item>
		</swiper>
		
		<!-- s商品信息区域 -->
		<view class="goods-info-box">
			<view class="price">
				{{goods_info.goods_price}}
			</view>
			<view class="goods-name">
				{{goods_info.goods_name}}
			</view>
			<view class="favi">
				<uni-icons type="star" size="18" color="gray"></uni-icons>
				<text>搜藏</text>
			</view>
			<rich-text :nodes="goods_info.goods_introduce"></rich-text>
			
			<!-- 商品导航组件 -->
			<view class="goods_nav">
				<uni-goods-nav :fill="true" @click="onClick" @buttonClick="buttonClick"></uni-goods-nav>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goods_info{}
			};
		},
		
		onload(options){
			//获取商品id
			const goods_id = options.goods_id
			//调用方法
			this.getGoodsDetail(goods_id)
		},
		
		methods:{
			async getGoodsDetail(goods_id){
				const {data:res} = await uni.$http.get('detail',{goods_id})
				if(res.meta.status !== 200) return uni.$showMsg()
				
				//使用字符串replace()方法，为img标签添加行内style样式，解决图片底部空白间隙问题,将/<img/g  替换成 <img style="display:block;"
				//webp格式照片 在iOS设备上不能很好显示，需要再次替换成jpg格式，  /<img /g是一个正则表达式
				res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g, '<img style="display:block;" ').replace(/webp/g,'jpg')
				
				this.goods_info = res.message
			},
			
			//实现轮播图的预览效果
			preview(i){
				//d调用uni.previewImage()方法预览图片
				uni.previewImage({
					//索引
					current:i,
					urls:this.goods_info.map(x => x.pic_big)
				})
			},
			
			//点击跳转
			onClick(e){
				if(e.content.text === '购物车')
				//切换到taber购物车页面
				uni.switchTab({
					url:'pages/cart/cart'
				})
			}
		}
	}
</script>

<style lang="scss">

</style>
